<template>
	<view class="warps">
		<view class="voice_an ">
			<view class="voice_an_icon">
				<view id="one" class="wave"></view>
				<view id="two" class="wave"></view>
				<view id="three" class="wave"></view>
				<view id="four" class="wave"></view>
				<view id="five" class="wave"></view>
				<view id="six" class="wave"></view>
				<view id="seven" class="wave"></view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.warps{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 1);
		z-index: 9999;
	}
	.text {
		padding-top: 30rpx;
	}

	.voice_an {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -55%);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;

	}

	@keyframes runVoice {
		0% {
			height: 10%;
		}

		20% {
			height: 50%;
		}

		50% {
			height: 100%;
		}

		80% {
			height: 50%;
		}

		100% {
			height: 0%;
		}
	}

	.wave {
		width: 6rpx;
		height: 60%;
		margin-left: 10rpx;
		border-radius: 50rpx;
		background-color: #FFB943;
		vertical-align: middle;
		display: inline-block;
	}

	.voice_an_icon {
		width: 200rpx;
		height: 100rpx;
		line-height: 50rpx;
		margin: 50rpx 0;
	}

	.voice_an_icon #one {
		animation: runVoice 0.6s infinite 0.1s;
	}

	.voice_an_icon #two {
		animation: runVoice 0.6s infinite 0.3s;
	}

	.voice_an_icon #three {
		animation: runVoice 0.6s infinite 0.6s;
	}

	.voice_an_icon #four {
		animation: runVoice 0.6s infinite 0.1s;
	}

	.voice_an_icon #five {
		animation: runVoice 0.6s infinite 0.3s;
	}

	.voice_an_icon #six {
		animation: runVoice 0.6s infinite 0.6s;
	}

	.voice_an_icon #seven {
		animation: runVoice 0.6s infinite 0.1s;
	}
</style>
